<template>
  <div class="order-detail-box">
    <!-- 自定义公共头部 -->
    <custom-header :title="'订单详情'" @callback="close"></custom-header>
    <!-- 显示订单基本信息 -->
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ detail.orderStatusString }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ detail.orderNo }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detail.createTime }}</span>
      </div>
      
      <!--状态按钮判断-->
      <van-button
        v-if="detail.orderStatus == 3"
        style="margin-bottom: 10px"
        color="#1baeae"
        block
        @click="handleConfirmOrder(detail.orderNo)"
        >确认收货</van-button
      >

      <!-- 模拟支付 -->
      <van-button
        v-if="detail.orderStatus == 0"
        style="margin-bottom: 10px"
        color="#1baeae"
        block
        @click="showPayFn"
        >去支付</van-button
      >
      <van-button
        v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)"
        block
        @click="handleCancelOrder(detail.orderNo)"
        >取消订单</van-button
      >
    </div>

    <!-- 订单金额和快递信息 -->
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ detail.totalPrice }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>

    <!-- 订单详情信息 -->
    <van-card
      v-for="item in detail.newBeeMallOrderItemVOS"
      :key="item.goodsId"
      style="background: #fff"
      :num="item.goodsCount"
      :price="item.sellingPrice"
      desc="全场包邮"
      :title="item.goodsName"
      :thumb="$filters.prefix(item.goodsCoverImg)"
    />

    <!-- 赏花弹窗，模拟确认支付 -->
    <van-popup
      v-model:show="showPay"
      position="bottom"
      :style="{ height: '24%' }"
    >
      <div :style="{ width: '90%', margin: '0 auto', padding: '20px 0' }">
        <van-button
          :style="{ marginBottom: '10px' }"
          color="#1989fa"
          block
          @click="handlePayOrder(detail.orderNo, 1)"
          >支付宝支付</van-button
        >
        <van-button
          color="#4fc08d"
          block
          @click="handlePayOrder(detail.orderNo, 2)"
          >微信支付</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
  
<script>
import { reactive, toRefs, onMounted } from "vue";
import CustomHeader from "components/CustomHeader.vue";
import {
  getOrderDetail,
  cancelOrder,
  confirmOrder,
  payOrder,
} from "service/order";
import { Dialog, Toast } from "vant";
import { useRoute } from "vue-router";

export default {
  name: "OrderDetail",
  components: {
    CustomHeader,
  },
  setup() {
    const route = useRoute();
    const state = reactive({
      detail: {},
      showPay: false,
    });

    onMounted(() => {
      initData();
    });

    // 初始化数据
    const initData = async () => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const { id } = route.query;
      const { data } = await getOrderDetail(id);
      state.detail = data;
      Toast.clear();
    };

    // 取消二次确认弹窗方法
    const handleCancelOrder = (id) => {
      Dialog.confirm({
        title: "确认取消订单？",
      })
        .then(() => {
          cancelOrder(id).then((res) => {
            if (res.resultCode == 200) {
              Toast("删除成功");
              initData();
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    };

    // 确认订单的方法
    const handleConfirmOrder = (id) => {
      Dialog.confirm({
        title: "是否确认订单？",
      })
        .then(() => {
          confirmOrder(id).then((res) => {
            if (res.resultCode == 200) {
              Toast("确认成功");
              initData();
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    };

    // 调用支付弹窗
    const showPayFn = () => {
      state.showPay = true;
    };
    // 模拟支付方法
    const handlePayOrder = async (id, type) => {
      await payOrder({ orderNo: id, payType: type });
      state.showPay = false;
      initData();
    };
    // 回调函数
    const close = () => {
      Dialog.close;
    };
    return {
      ...toRefs(state),
      handleCancelOrder,
      handleConfirmOrder,
      showPayFn,
      handlePayOrder,
      close,
    };
  },
};
</script>
  
<style lang="less" scoped>
.order-detail-box {
  background: #f7f7f7;
  .order-status {
    background: #fff;
    padding: 20px;
    font-size: 15px;
    .status-item {
      margin-bottom: 10px;
      label {
        color: #999;
      }
      span {
      }
    }
  }
  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;
    .price-item {
      margin-bottom: 10px;
      label {
        color: #999;
      }
      span {
      }
    }
  }
  .van-card {
    margin-top: 0;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>